﻿/**
 *	html/pem_monitor.js
 *
 *	(C) 2014 Yuanjj
 *
 * 	history:
 * 		2014-07-07		create the file
 */

/**
 *	create monitor panel
 *
 *	@panel_main			[in] the main panel object
 */
var g_panel_monitor;
function create_monitor_panel( panel_main )
{
    //var g_panel_monitor = new Ext.panel.Panel
    var g_panel_monitor = Ext.create
    ("Ext.panel.Panel", {
         id:"panel_monitor",
         layout:"border",
         height:"100%",
         width:"100%",
         autoScroll:false,
         defaults:{ split:true },
         listeners:{
             afterrender:create_subpanel_for_monitor
         }
    });

    g_panel_monitor.hide();

    g_panel_monitor.setWidth( Ext.getBody().getWidth() );
    g_panel_monitor.setHeight( Ext.getBody().getHeight() - 2 );
    panel_main.panel_monitor = g_panel_monitor;

    panel_main.add( g_panel_monitor );
}

/**
 *	create monitor subpanel
 *
 *	@panel_monitor			[in] monitor panel object
 */
function create_subpanel_for_monitor( panel_monitor )
{
    var panel_north		= create_region_panel( "panel_north", "north", 200, 0, false, "vbox", false, _create_subpanel_for_north );
    var panel_south		= create_region_panel( "panel_south", "south", 30, 0, false, "auto", false, _create_subpanel_for_south );
    var panel_west		= create_region_panel( "panel_west", "west", 300, 200, true, "fit", true, _create_subpanel_for_west );
    var panel_center	= create_region_panel( "panel_center", "center", "100%", "100%", false, "vbox", false, _create_subpanel_for_center );

    panel_monitor.panel_north 	= panel_north;
    panel_monitor.panel_south 	= panel_south;
    panel_monitor.panel_west	= panel_west;
    panel_monitor.panel_center	= panel_center;

    panel_monitor.add( panel_north );
    panel_monitor.add( panel_south );
    panel_monitor.add( panel_west );
    panel_monitor.add( panel_center );
}

/**
 *	create region subpanel
 *
 *	@id				[in] the id of the panel
 *	@region			[in] the region of the layout (one of "north", "south", "west", "east" and "center")
 *	@height			[in] the region height
 *	@width			[in] the region width
 *	@split			[in] enable the border to be drag ( "true" or "false" )
 *	@laytou			[in] the type of subpanel layout
 *	@collapsible	[in] collapsible flag ( "true" or "false" )
 *	@afterrender	[in] afterrender listener call back function
 *
 *	return
 *		the region panel object
 */
function create_region_panel( id, region, height, width, split, layout, collapsible, afterrender )
{
    var panel_region = new Ext.panel.Panel
    ({
         id:id,
         region:region,
         height:height,
         width:width,
         split:split,
         layout:layout,
         collapsible:collapsible,
         listeners:{
             afterrender:afterrender
         }
    });

    panel_region.add_subpanel = function( subpanel )
    {
        if ( this.subpanel === undefined )
            this.subpanel = new Array();

        this.subpanel[subpanel.id]	= subpanel;
        this.add( subpanel );
    }

    return panel_region;
}
